<template>
  <div class="f_page">
    <div class="f_yemian">
      <div class="title">供应商列表</div>
      <div class="top">
        <div class="shuru">
          <!--  <div>供应商简称</div> -->
          <el-input class="neirong"
                    v-model="input_1"
                    placeholder="供应商名称"></el-input>
          <!--   <el-input class="neirong"
                    v-model="input_2"
          placeholder="所在地区"></el-input>-->
          <!--    <el-button class="anniu"
          type="primary">搜索</el-button>-->
          <el-select v-model="form.shen"
                     placeholder="选择省"
                     @change="qinqiu_shi({ zhi: 1, id: form.shen })">
            <el-option v-for="item in diqu.shen"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <el-select v-model="form.shi"
                     placeholder="选择市"
                     @change="qinqiu_qu({ zhi: 2, id: form.shi })">
            <el-option v-for="item in diqu.shi"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <el-select v-model="form.qu"
                     @change="xuanze_qu({ zhi: 2, id: form.qu })"
                     placeholder="选择区">
            <el-option v-for="item in diqu.qu"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </div>
        <el-select v-model="value1"
                   placeholder="供应商级别"
                   class="xuanze">
          <el-option v-for="item in d_jb"
                     :key="item.id"
                     :label="item.levelName"
                     :value="item.id"></el-option>
        </el-select>
        <el-select v-model="value2"
                   placeholder="供应商类别"
                   class="xuanze">
          <el-option v-for="item in d_lb"
                     :key="item.id"
                     :label="item.typeName"
                     :value="item.id"></el-option>
        </el-select>
        <el-select v-model="value3"
                   placeholder="审核状态"
                   class="xuanze">
          <el-option v-for="item in d_zt"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>

        <el-button class="anniu"
                   type="primary"
                   @click="lb_list">搜索</el-button>
        <el-button class="anniu"
                   type="primary"
                   @click="xinzen">新增供应商</el-button>
      </div>
      <div class="zhongbu">
        <div class="biao">
          <template>
            <el-table :data="list"
                      height="650px"
                      border
                      style="width: 100%">
              <el-table-column type="index"
                               label="序号"
                               width="auto"></el-table-column>
              <el-table-column prop="supplierId"
                               label="供应商ID"
                               width="auto"></el-table-column>
              <el-table-column prop="supplierNameShort"
                               label="供应商简称"
                               width="auto"></el-table-column>
              <el-table-column prop="typeName"
                               label="供应商类别"
                               width="auto"></el-table-column>
              <el-table-column prop="levelName"
                               label="供应商级别"
                               width="auto"></el-table-column>
              <el-table-column prop="supplyAreas"
                               label="供应区域"
                               width="auto">
                <!--     <template slot-scope="scope">
                  <span >{{scope.row.supplyAreas[0]}}</span>
                  <span >{{scope.row.supplyAreas[1]}}</span>
                </template>-->
              </el-table-column>
              <el-table-column prop="status"
                               label="审核状态"
                               width="auto">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 0">初审中</span>
                  <span v-if="scope.row.status == 1">补充资料</span>
                  <span v-if="scope.row.status == 2">终审中</span>
                  <span v-if="scope.row.status == 3">初审不通过</span>
                  <span v-if="scope.row.status == 4">终审不通过</span>
                  <span v-if="scope.row.status == 5">审核通过</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right"
                               label="操作"
                               width="auto">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.status == 0 || scope.row.status == 2"
                             size="mini"
                             type="success"
                             @click="shenhe(scope.row)">审核</el-button>
                  <el-button v-if="scope.row.status !== 0 || scope.row.status !== 2"
                             size="mini"
                             type="primary"
                             @click="chakan(scope.row)">查看</el-button>
                  <el-button size="mini"
                             type="info"
                             @click="shanchu(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>

      <!--  <el-pagination
        class="fanye"
        background
        layout="prev, pager, next"
        :page-size="1"
        @current-change="fanye"
        :total="this.total"
<<<<<<< Updated upstream
      >
      </el-pagination>  -->

      <!-- 分页数据 -->
      <el-pagination @current-change="fanye"
                     background
                     :current-page="pagenum"
                     :page-size="pagesize"
                     layout="prev,pager,next"
                     :total="total - 0"
                     style="margin-top:20px;text-align:center"></el-pagination>

      </el-pagination>

    </div>
  </div>
</template>

<script>
import {
  gonyin_list,
  gonyin_jibie,
  gonyin_liebiao,
  gonyin_shanchu,
  diqu
} from "@/api/gonyin.js";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      input: "",
      d_jb: [{ label: "初审中", value: 1 }],
      d_lb: [{ label: "初审中", value: 2 }],
      d_zt: [
        { label: "初审中", value: 0 },
        { label: "补充资料", value: 1 },
        { label: "终审中", value: 2 },
        { label: "初审不通过", value: 3 },
        { label: "终审不通过", value: 4 },
        { label: "审核通过", value: 5 }
      ],
      value1: "",
      value2: "",
      value3: "",
      input_1: "",
      input_2: "",
      list: [],
      // page: 1,
      // total: 1,
      // 显示第几页
      pagenum: 1,
      total: "",
      // 每页显示的数据
      pagesize: 10,
      value: "",
      form: { shen: [], shi: [], qu: [] },
      diqu: { shen: [], shi: [], qu: [] },
      diqu_zhi: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //新增
    xinzen() {
      this.$router.push({
        name: "xinzen"
        /*   params: { id: res.supplierId, zhi: false } */
      });
    },
    /* 查看供应商 */
    chakan(res) {
      console.log(res.status, "详情");
      let id = res.supplierId;
      let zhi = res.status;
      if (zhi == 0 || zhi == 1) {
        console.log("初审");
        this.$router.push({
          name: "chushen",
          query: { id: res.supplierId, zhi: false }
        });
      } else if (zhi == 2) {
        console.log("终审");
        this.$router.push({
          name: "xiangqin",
          query: { id: res.supplierId, zhi: false }
        });
        console.log({ id: res.supplierId, zhi: false });
      } else if (zhi == 5) {
        console.log("完整详情");
        this.$router.push({
          name: "xiangqin",
          query: { id: res.supplierId, zhi: false }
        });
      }
      /*    this.$router.push({ name: "Menu1-2", params: { zhi: "123" } }); */
    },
    /* 进入审核 */
    shenhe(res) {
      let id = res.supplierId;
      let zhi = res.status;
      console.log(zhi, "审核");
      if (zhi == 0) {
        console.log("初审");
        this.$router.push({
          name: "chushen",
          query: { id: id, zhi: true }
        });
      } else if (zhi == 2) {
        console.log("终审");
        this.$router.push({
          name: "xiangqin",
          query: { id: id, zhi: true }
        });
      }
    },
    /* 删除当前元素*/
    shanchu(res) {
      let index = res;
      let supplierId = this.list[res].supplierId;
      console.log(res, supplierId, "???");
      this.$confirm("此操作将删除该供应商资料, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("?????????");
          let data = { supplierId };
          gonyin_shanchu(data).then(res => {
            if (res.data == true) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
            this.list.splice(index, 1);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //页面请求供应商级别
    jibie() {
      let data = {};
      gonyin_jibie(data).then(res => {
        this.d_jb = res.rows;
      });
    },
    //页面请求供应商类别
    leibie() {
      let data = {};
      gonyin_liebiao(data).then(res => {
        this.d_lb = res.rows;
      });
    },
    //翻页
    fanye(val) {
      console.log(val);
      this.pagenum = val;
      this.lb_list();
    },
    //
    handleChange(value) {
      /*    console.log(value);
      console.log(f1); */
    },
    handleClick() {
      console.log("123456");
      /* console.log(row); */
    },
    //页面请求详情
    lb_list() {
      //直接定义一个数组
      /*       let diqu = [this.form.shen, this.form.shi, this.form.qu].pop(); */
      console.log(this.diqu_zhi, "5555");
      /*    let diqu_id = diqu;
      console.log(diqu_id, "66666"); */
      let data = {
        levelId: this.value1 == "" ? "" : Number(this.value1),
        supplierTypeId: this.value2 == "" ? "" : Number(this.value2),
        status: this.value3 == "" ? "" : Number(this.value3),
        pageNo: Number(this.page),
        supplierNameShort: this.input_1,
        district: this.form.shen == "" ? "" : this.diqu_zhi,
        pageNo: this.pagenum
      };

      gonyin_list(data).then(response => {
        this.list = response.rows.map((i, v) => ({
          supplyAreas: i.supplyAreas.splice(2).join(","),
          districtId: i.districtId,
          levelId: i.levelId,
          levelName: i.levelName,
          status: i.status,
          supplierId: i.supplierId,
          supplierName: i.supplierName,
          supplierNameShort: i.supplierNameShort,
          supplierTypeId: i.supplierTypeId,
          typeName: i.typeName
        }));
        this.total = response.total;
        this.pagesize = response.pageSize;
        // this.total = Number((response.total / response.pageSize).toFixed(0));
        console.log(response, "页面数据");
      });
      /*   let zhi = res.data;
        zhi.supplyAreas = zhi.supplyAreas.splice(2);
        zhi.supplyAreas = zhi.supplyAreas.join(","); */
    },
    //地区请求
    qinqiu_shen() {
      let data = { areaParentId: 1 };
      diqu(data).then(res => {
        this.diqu.shen = res.rows;
      });
    },
    qinqiu_shi(e) {
      console.log(e.id, "市请求");
      let data = { areaParentId: e.id };
      this.diqu_zhi = e.id;
      diqu(data).then(res => {
        this.diqu.shi = res.rows;
        this.form.shi = [];
        this.form.qu = [];
        console.log(res.rows, "市");
      });
    },
    qinqiu_qu(e) {
      console.log(e.id, "区请求");
      let data = { areaParentId: e.id };
      this.diqu_zhi = e.id;
      diqu(data).then(res => {
        this.diqu.qu = res.rows;
        this.form.qu = [];
        console.log(res.rows, "市");
      });
    },
    xuanze_qu(e) {
      this.diqu_zhi = e.id;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.lb_list();
    this.jibie();
    this.leibie();
    this.qinqiu_shen();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/*   //@import url(); 引入公共css类 */
.fanye {
  display: flex;
  justify-content: center;
  width: auto;
}
.f_page {
  display: flex;
  justify-content: center;
  .f_yemian {
    display: flex;
    width: 95%;
    flex-direction: column;
    .title {
      font-size: 20px;
      margin: 20px 0px 20px 20px;
    }
    .top {
      display: flex;
      width: 100%;
      height: auto;
      .shuru {
        display: inline-flex;
        width: auto;
        align-items: center;
        .neirong {
          width: 200px;
          margin-left: 20px;
        }
      }
      .anniu {
        margin-left: 20px;
        margin-right: 50px;
      }
      .xuanze {
        margin-left: 20px;
      }
    }
    .zhongbu {
      .biao {
        width: 100%;
        margin-top: 50px;
      }
    }
  }
}
</style>
